<template>
	<view :class="['page',emptyText==''?'':'b-f']">
		<hx-navbar v-if="emptyText==''" title="教师详情" :fixed="true" bar-placeholder="hidden" :transparent="showConfirmPopup?'show':'auto'" :background-color="[127, 74, 255, 1]" color="#ffffff" :pageScroll.sync="scrollData" />
		<block v-if="emptyText==''">
			<view class="teacher-info" :style="{ 'padding-top': statusBarHeight + 15 + 'px' }" v-if="teacherCouser.teacher">
				<view class="content">
					<!-- 教师信息 -->
					<view class="padding040">
						<view class="dis-flex flex-dir-column">
							<view class="dis-flex height130">
								<view class="headeravatar p-r">
									<image :src="teacherCouser.teacher.headeravatar" class="img-url" mode="aspectFill" lazy-load></image>
									<image v-if="teacherCouser.teacher.grade != 0" class="p-a teacher_grade" :src="teacherCouser.teacher.grade == 1? imgPrefix('/static/image/teacher/grade1.png'): teacherCouser.teacher.grade==2?
									imgPrefix('/static/image/teacher/grade2.png'): imgPrefix('/static/image/teacher/grade3.png')"></image>
								</view>
								<view class="flex-box flex-dir-column">
									<view class="f_40 f_normal title onelist-hidden f_semibold">{{ teacherCouser.grade.title }}{{ teacherCouser.language.title }}{{ teacherCouser.teacher.nickname }}</view>
									<view class="dis-flex">
										<text class="type f_22 f_normal language_type_text c-f" :style="{backgroundColor:teacherCouser.language.color}">{{ teacherCouser.language.title }}</text>
										<view class="price">
											<text class="f_32 f_semibold">￥{{ teacherCouser.price }}/</text>
											<text class="f_24">{{teacherCouser.hour>1?teacherCouser.hour:''}}小时</text>
										</view>
									</view>
								</view>
							</view>
							<view class="dis-flex">
								<text class="lable f_22 f_normal teacher" v-if="teacherCouser.classdata == 0||teacherCouser.classdata==1">教师上门</text>
								<text class="lable f_22 f_normal student" v-if="teacherCouser.classdata == 0||teacherCouser.classdata==2">学生上门</text>
								<text v-if="teacherCouser.teacher.grade != 0" :class="['lable','f_26','f_normal',teacherCouser.teacher.grade == 1?'g1':'',teacherCouser.teacher.grade == 2?'g2':'',teacherCouser.teacher.grade == 3?'g3':'']">{{ teacherCouser.teacher.grade == 1?'铜':teacherCouser.teacher.grade == 2?'银':'金' }}牌教师</text>
								<text class="lable f_22 f_normal" v-for="(item, index) in teacherCouser.teacher.tag" :key="index">{{ item.tag_name }}</text>
							</view>
							<view class="dis-flex flex-x-between">
								<view class="f_24 gery1">
									教龄
									<text class="navy_blue m_r_32 f_semibold">{{ teacherCouser.teacher.teaching_year }}年</text>
									 已授
									<text class="navy_blue f_semibold">{{ teacherCouser.course_count }}课</text>
								</view>
								<text class="gery1 f_24">{{ teacherCouser.teacher.distance }}</text>
							</view>
						</view>
						<view class="boder-bottom mt26" style="margin-bottom: 26rpx;"></view>
					</view>
					<!-- 图片组 -->
					<scroll-view scroll-x="true" width="100%" style="white-space: nowrap;">
						<view class="urls-box" v-if="teacherCouser.teacher.images">
							<image v-for="(item, index) in teacherCouser.teacher.images" @tap.stop="bindImage(teacherCouser.teacher.images, index)"
							:key="index" :src="item.image" mode="aspectFill" lazy-load></image>
						</view>
					</scroll-view>
					<!-- tag -->
					<!-- <scroll-view v-if="teacherCouser.teacher.tag.length > 0" scroll-x width="100%" style="white-space: nowrap;">
						<view class="tag f_22 dis-flex">
							<view class="dis-flex flex-y-center" v-for="(item, index) in teacherCouser.teacher.tag" :key="index">
								<image :src="imgPrefix('/static/image/icon/teacher_detail_tag.png')" lazy-load></image>
								<text>{{ item.tag_name }}</text>
							</view>
						</view>
					</scroll-view>
					<view v-if="teacherCouser.teacher.images.length!=0" class="boder-bottom mt26"></view> -->
				</view>
			</view>
			<!-- 教学特点 -->
			<view class="trait-box box" v-if="teacherCouser.teacher.trait">
				<view class="title f_32 f_semibold navy_blue">教学特点</view>
				<view class="trait gery1 f_26 f_normal">{{ teacherCouser.teacher.trait }}</view>
			</view>
			<!-- 在授课程 -->
			<view class="schooling-box box" @click="switchConfirmPopup" v-if="teacherCouser.teacher">
				<view class="title f_32 f_semibold m_b_38 navy_blue">在售课程</view>
				<view class="schooling gery1 f_24 f_normal dis-flex">
					<image class="study" :src="imgPrefix('/static/image/icon/study_teacher.png')"></image>
					<view class="dis-flex flex-box flex-y-center flex-x-between">
						<view class="">
							<view class="f_32 f-c1 f_semibold">上门一对一教学</view>
							<view class="f_22 f-c2">个性化课程辅导，量身打造教学计划</view>
						</view>
						<view class="next"><image :src="imgPrefix('/static/image/icon/teacher_detail_next.png')" lazy-load></image></view>
					</view>
				</view>
			</view>
			<!-- 教师评价 -->
			<view class="box comment-box" v-if="teacherCouser.comments.comments">
				<view class="title f_32 f_semibold navy_blue navy_blue">教师评价</view>
				<view class="comment">
					<view class="score dis-flex">
						<view class="synthesize flex-box f-1f2633">
							<view class="m-b-18 f_28 f_semibold">综合评分</view>
							<view class=""><image v-for="(item, index) in 5" :key="index" lazy-load
									:src="index < teacherCouser.comments.com_score? imgPrefix('/static/image/icon/comment_status_1.png'): imgPrefix('/static/image/icon/comment_status_0.png')"
									></image>
							</view>
						</view>
						<view class="result flex-box dis-flex flex-y-center flex-dir-column f-1f2633">
							<view class="m-b-18 f_28 f_semibold">效果满意度</view>
							<view class="f_28 f_semibold">{{ teacherCouser.comments.result_like }}</view>
						</view>
						<view class="serve flex-box dis-flex flex-y-center flex-dir-column f-1f2633">
							<view class="m-b-18 f_28 f_semibold">服务满意度</view>
							<view class="f_28 f_semibold">{{ teacherCouser.comments.service_like }}</view>
						</view>
					</view>
					<view :class="teacherCouser.comments.tag.length > 0 ? 'tag-box dis-flex' : ''">
						<view v-for="(item, index) in teacherCouser.comments.tag" :key="index" class="tag">{{ item.tag_name }}</view>
					</view>
				</view>
				<comment-list :commentList="teacherCouser.comments.comments" :type="1"></comment-list>
				<view class="f_24 gery1 t-c p24" @click="skipComment">查看全部评论（{{ teacherCouser.comment_count }}）</view>
			</view>
			<!-- 教学经历 -->
			<view class="box experience-list-box" v-if="teacherCouser.teacher.experience.length > 0">
				<view class="title f_32  f_semibold navy_blue">教学经历</view>
				<view v-for="(item, index) in teacherCouser.teacher.experience" :key="index" class=" item">
					<view class="dis-flex flex-x-between">
						<view class="f_28 navy_blue m_r_32 name f_semibold">{{ item.corporation }}</view>
						<!-- <view class="f_22 time">
							{{ item.starttime }}
							<text v-if="item.endtime != ''">-{{ item.endtime }}</text>
						</view> -->
					</view>
					<view class="dis-flex">
						<view class="f_22 gery m_r_16">{{ item.title }}</view>
						<view class="f_22 time">
							{{ item.starttime }}
							<text v-if="item.endtime != ''">-{{ item.endtime }}</text>
						</view>
					</view>
					<view class="f_24 describe">{{ item.content }}</view>
				</view>
				<view class="f_24 gery1 t-c p24" @click="skipExperience">查看全部经历</view>
			</view>
			<!-- 更多推荐 -->
			<view class="box recommend-list" v-if="teacherCouser.recommend.length > 0">
				<view class="title f_32 f_normal navy_blue">更多推荐</view>
				<course-list :selectList="teacherCouser.recommend" :lat="latitude" :lon="longitude" :listType="0" @bind-index="toTeacherDetail"></course-list>
			</view>
			<!-- 底部 -->
			<view class="bottom-box dis-flex flex-y-center " v-if="teacherCouser.teacher">
				<view class="p-r flex-box dis-flex flex-dir-column flex-y-center flex-x-center">
					<view class=""><image :src="imgPrefix('/static/image/icon/share.png')" mode=""></image></view>
					<view class="f_20 f_normal gery1">分享</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn" open-type="share">分享</button>
					<!-- #endif -->
				</view>
				<view class="p-r flex-box dis-flex flex-dir-column flex-y-center flex-x-center">
					<view class=""><image :src="imgPrefix('/static/image/icon/service.png')" mode=""></image></view>
					<view class="f_20 f_normal gery1">客服</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn" open-type="contact">客服</button>
					<!-- #endif -->
				</view>
				<view class="flex-box dis-flex flex-dir-column flex-y-center flex-x-center" @click="collectToggle">
					<view class="">
						<image :src="teacherCouser.is_collect ? imgPrefix('/static/image/icon/collect_true.png') : imgPrefix('/static/image/icon/collect.png')" lazy-load></image>
					</view>
					<view class="f_20 f_normal gery1">收藏</view>
				</view>
				<view class="f_32 f_normal btn f_semibold" @click="switchConfirmPopup">预约课程</view>
			</view>
			<zan-popup :show="showConfirmPopup" :type="location" @close="switchConfirmPopup">
				<view class="popup">
					<view class="top">
						<view class="info dis-flex flex-x-between">
							<view class="dis-flex">
								<view class=""><image :src="teacherCouser.teacher.headeravatar" class="img-url" mode="aspectFill" lazy-load></image></view>
								<view class="dis-flex flex-dir-column flex-x-center">
									<view class="f_32 f_normal title f_semibold">{{ teacherCouser.title }}{{ teacherCouser.teacher.nickname }}</view>
									<view class="f_26 gery1">
										教龄
										<text class="navy_blue">{{ teacherCouser.teacher.teaching_year }}年 ·</text>
										已授
										<text class="navy_blue">{{ teacherCouser.course_count }}课</text>
									</view>
								</view>
							</view>
							<view class=""><image @click="switchConfirmPopup" :src="imgPrefix('/static/image/icon/address_close.png')" class="close" lazy-load></image></view>
						</view>
						<view class="types">
							<view class="f_32 title f_semibold">授课方式</view>
							<view class="dis-flex">
								<view
									v-for="(item, index) in types"
									:key="index"
									@click="typesToggle(index)"
									:class="['default', 'f_24', 'f_normal', typesIndex == index ? 'active' : '']"
								>
									{{ item.title }}
								</view>
							</view>
						</view>
					</view>
					<view class="bottom dis-flex flex-y-center flex-x-between">
						<view class="price f_32 f_semibold">￥{{ teacherCouser.price }}/<text class="f_26">{{teacherCouser.hour>1?teacherCouser.hour:''}}小时</text></view>
						<view class="btn f_32 t-c f_semibold" @click="subscribe">预约课程</view>
					</view>
				</view>
			</zan-popup>
			<!-- 教师端end -->
			<authorization @close="closeLoginPopup" @confirm="confirm" :showPopup="showLoginPopup"></authorization>
		</block>
		<page-empty v-else-if="emptyText!=''" :paddingTop="statusBarHeight+70+'px'" :emptyText="emptyText" @comEmptyBtn="bindEmptyBtn"></page-empty>
	</view>
</template>

<script>
const app = getApp();
import { pageEmpty } from '@/static/mixins/pageEmpty.js';
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
import authorization from '@/components/authorization/index.vue'; //authorization
import API from '@/static/api/index.js';
import zanPopup from '@/components/popup/index.vue'; //弹出层
import loadMore from '@/components/loadmore/index.vue';

import { toPage } from '@/static/uitls/common.js';
import { getLocation } from '@/static/uitls/getLocation.js'; // 获取经纬度
import commentList from '@/components/comment-list/index.vue'; //评论列表
import courseList from '@/components/course-list/index.vue'; //推荐列表
import { getDistance } from '@/static/uitls/common.js';
import { getLangeClass } from '@/static/uitls/changeData.js';
import { setCourseFormat } from '@/static/uitls/changeData.js'; //获取系统状态栏高度
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import { getTemplateList } from '@/static/mixins/getTemplateList.js'; // 订阅消息

export default {
	components: {
		commentList,
		courseList,
		zanPopup,
		authorization
	},
	mixins: [commonMixinFun,pageEmpty,statusBarHeight,getTemplateList],
	data() {
		return {
			showLoginPopup: false, //是否显示登录组件
			id: '',
			scrollData: {},
			teacherCouser: {
				comments:{}
			},
			latitude: '',
			longitude: '',
			location: 'bottom', //弹出层位置
			showConfirmPopup: false, //是否选择确认弹出层
			types: [
				{
					class_id: '1',
					title: '教师上门'
				},
				{
					class_id: '2',
					title: '学生上门'
				}
			], //授课方式
			typesIndex: 0//已选授课方式下标
		};
	},
	onLoad(options) {
		app._log('t_d_options:::', options);
		this.id = options.hasOwnProperty('scene')?decodeURIComponent(options.scene).split('=')[1]:options.id;
		//获取教师详情
		// this._getTeacherDetail(24);
		this._getTeacherDetail(this.id);
		this._getTemplateList()
	},
	watch:{
		teacherCouser(val,oldVal){
			app._log('教师信息请求到了',val,oldVal)
			let num = Number(val.classdata)
			if(num!=0){
				let {types} = this;
				types = types.splice(num==1?0:1,1);
				this.types = types;
			}
		}
	},
	methods: {
		closeLoginPopup() {
			this.showLoginPopup = false;
			this.is_login = app.globalData.LOGION;
		},
		confirm() {
			this.closeLoginPopup();
			this.switchConfirmPopup();
		},
		bindImage(arr, index) {
			let tempArr = [];
			arr.forEach(e=>{
				tempArr.push(e.image)
			})
			app.previewImg(tempArr, index);
		},
		//获取教师详情
		_getTeacherDetail(id) {
			let that = this;
			API.getTeacherDetail(id).then(({code,data,msg}) => {
				if(code==1){
					let info = data.teacher_couser;
					info.language.class = getLangeClass(info.language.title);
					info.recommend = setCourseFormat(info.recommend);
					info.price = parseFloat(info.price);
					that.teacherCouser = info;
					that._getLocation();
				}else if(code==10008){
					this.emptyText='暂无该课程'
				}else if(code==405){
					this.emptyText='该课程已被教师删除，下次请早？'
				}else if(code==10001){
					this.emptyText='当前教师已经停止接单'
				}
			}).catch(err=>{
				this.emptyText = err.msg||'网络加载失败，白小可很无奈'
			})
		},
		//预约课程
		subscribe() {
			let { is_login, types, typesIndex } = this;
			app._log('teacher_detail_is_login', is_login);
			if (is_login) {
				if (types.length != 0) {
					// app._log(types)
					let { teacher_id, teacher_course_id, hour, price, title, course_count, teacher, language } = this.teacherCouser;
					let sendObj = {
						teacher_id: teacher_id, //教师ID
						teacher_course_id: teacher_course_id, //教师课程ID
						headeravatar: teacher.headeravatar, //头像
						title: title, //标题
						nickname: teacher.nickname, //名称
						phone: teacher.phone, //电话
						year: teacher.teaching_year, //教龄
						address: teacher.address, //教师地址
						course_count: course_count, //已授课次
						language: language.title, //语种
						price: price, //单次课程费用
						hour: hour, //单次课程时长
						typeStr: types[typesIndex].title, //授课方式文本
						typeId: types[typesIndex].class_id //授课方式文本
					};
					toPage('/pages/subscribe_course/index', sendObj);
				}
			} else {
				this.switchConfirmPopup();
				this.showLoginPopup = true;
			}
		},
		setDistance() {
			let { latitude, longitude, teacherCouser } = this;
			this.teacherCouser.teacher.distance = getDistance(latitude, longitude, teacherCouser.teacher.latitude, teacherCouser.teacher.longitude, 1, 'str');
		},
		//收藏切换
		collectToggle() {
			// this.collect=!this.collect
			API.isCollect(this.teacherCouser.teacher_course_id).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg
					});
				}
				this._getTeacherDetail(this.id);
			});
		},
		typesToggle(index) {
			this.typesIndex = index;
		},
		// 关闭弹窗事件
		switchConfirmPopup(delay = 0) {
			setTimeout(() => {
				this.showConfirmPopup = !this.showConfirmPopup;
			}, delay);
		},
		//查看全部评论
		skipComment() {
			toPage('/pages/comment_list/index?teacher_course_id=' + this.teacherCouser.teacher_course_id, {});
		},
		//查看全部教学经历
		skipExperience() {
			toPage('/pages/teaching_experience/index?teacher_id=' + this.teacherCouser.teacher_id, {});
		},
		// 获取用户位置信息
		_getLocation() {
			this.showLoading('加载中');
			let _this = this;
			getLocation(
				function(res) {
					let { code, latitude, longitude } = res;
					if (code) {
					} else {
						app._log(latitude, longitude);
						_this.latitude = latitude;
						_this.longitude = longitude;
					}
					app._log(res);
					_this.setDistance();
				},
				false,
				true,
				_this
			);
		},
		// 点击教师view
		toTeacherDetail(index) {
			this.pageTo('/pages/teacher_detail/index', { id: this.teacherCouser.recommend[index].teacher_course_id });
			// this.showToast(`点了第${index + 1}位教师`);
		}
	},
	
	onPageScroll(e) {
		this.scrollData = e;
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			app._log(res.target);
		}
		return {
			title: '教师详情',
			imageUrl: this.imgPrefix('/static/image/share_cover.png'),
			path: '/pages/teacher_detail/index?id=' + this.id
		};
	}
};
</script>

<style lang="scss" scoped>
.f-1f2633{
	color: #1f2633;
}
.height130{
	height: 130rpx;
}
.page {
	padding-bottom: 148rpx;
	.teacher-info {
		background-image: linear-gradient(228deg, #a47eff 0%, #7f4aff 100%);
		.content {
			border-bottom: 16rpx solid #f4f4f4;
			// padding: 24rpx 48rpx;
			padding: 24rpx 0rpx;
			background-color: #ffffff;
			border-radius: 56rpx 56rpx 0rpx 0rpx;
			.padding040{
				padding: 0 48rpx;
			}
			.headeravatar{
					left: 0rpx;
					top: -46rpx;
					.img-url {
						width: 144rpx;
						height: 144rpx;
						border: solid 4rpx #ffffff;
					}
				.teacher_grade{
					width: 48rpx;
					height: 48rpx;
					box-shadow: 0rpx 0rpx 8rpx 0rpx 
						rgba(227, 123, 48, 0.12);
					border-radius: 24rpx;
					border: solid 2.4rpx #ffffff;
					left: 96rpx;
					top: 96rpx;
				}
			}
			.title {
				width: 450rpx;
				margin-bottom: 10rpx;
			}
			.type {
				padding: 0rpx 8rpx;
				border-radius: 2rpx 8rpx 2rpx 8rpx;
				margin-right: 16rpx;
				display: inline-block;
				height: 36rpx;
			}
			.urls-box {
				padding-left: 48rpx;
				image {
					border-radius: 8rpx;
					width: 136rpx;
					height: 136rpx;
					margin: 0rpx 16rpx 0 0;
				}
			}
			.img-url {
				width: 100rpx;
				height: 100rpx;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(37, 39, 72, 0.1);
				border: solid 3rpx #ffffff;
				border-radius: 32rpx;
				margin-right: 24rpx;
			}
			.lable {
				padding: 4rpx 8rpx;
				color: rgba(37, 39, 72, 0.6);
				background-color: #f6f6f8;
				border-radius: 2rpx 8rpx 2rpx 8rpx;
				margin: 0rpx 16rpx 20rpx 0;
				display: inline-block;
				&.teacher{
					color: #7f4aff;
					background-color: rgba(127, 74, 255, 0.12);
				}
				&.student{
					color: #ff6f03;
					background-color: rgba(255, 111, 3, 0.1);
				}
				&.g1{
					color: #e69e6c;
					background-color: rgba(255, 111, 3, 0.1);
				}
				&.g2{
					color: #94B0CE;
					background-color: rgba(176,210,241, 0.1);
				}
				&.g3{
					color: #FFC055;
					background-color: rgba(255,207,122, 0.1);
				}
			}
			.tag {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
				// color: #252748;
				// opacity: 0.5;
				color: rgba(37, 39, 72, 0.3);
			}
			.tag > view {
				margin-right: 24rpx;
			}
			.m_r_48 {
				margin-right: 48rpx;
			}
			.boder-bottom {
				background-color: #ededed;
				width: 654rpx;
				height: 1px;
				&.mt26 {
					margin-top: 26rpx;
				}
			}
		}
	}
	.box {
		background-color: white;
		padding: 32rpx 48rpx;
		border-bottom: 16rpx solid #f4f4f4;
		.title {
			margin-bottom: 26rpx;
		}
	}
	.trait-box {
		.trait {
			padding: 16rpx;
			background-color: rgba(209, 210, 219, 0.3);
			border-radius: 8rpx;
			text-align: justify;
		}
	}
	.schooling-box {
		.m_b_38 {
			margin-bottom: 38rpx;
		}
		.schooling {
			height: 116rpx;
			// background-image: linear-gradient(268deg, rgba(127, 74, 255, 0.12) 0%, rgba(224, 211, 255, 0.12) 100%);
				background-image: linear-gradient(270deg, 
					#fdfdff 0%, 
					rgba(214, 215, 253, 0.47) 53%, 
					rgba(220, 219, 253, 0.06) 100%);
			border-radius: 16rpx;
			.study {
				width: 160rpx;
				height: 160rpx;
				position: relative;
				top: -20rpx;
			}
			.next image {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(127, 74, 255, 0.12);
			}
			.f-c1 {
				color: #252748;
				margin-bottom: 10rpx;
			}
			.f-c2 {
				color: #252748;
				opacity: 0.6;
			}
		}
	}
	.comment-box {
		padding: 0;
		.p24 {
			padding: 24rpx 0;
		}
		.comment {
			background-color: #f4f4f7;
			border-radius: 16rpx;
			margin: 0rpx 48rpx 0rpx 48rpx;
		}
		.title {
			padding: 32rpx 48rpx 0 48rpx;
		}
		.m-b-18 {
			margin-bottom: 18rpx;
		}
		.m-b-12 {
			margin-bottom: 12rpx;
		}
		.score {
			font-size: 0;
			padding: 24rpx 0;
			margin: 0 24rpx;
			.synthesize {
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}
		}
		.tag-box {
			border-top: 1px solid #ededed;
			flex-wrap: wrap;
			margin: 0rpx 24rpx 0 24rpx;
			padding-top: 24rpx;
			.tag {
				color: #7f4aff;
				background-color: rgba(127, 74, 255, 0.08);
				margin-bottom: 24rpx;
				white-space: nowrap;
				margin-right: 16rpx;
				font-size: 26rpx;
				border-radius: 8rpx;
				padding: 12rpx 16rpx;
			}
		}
	}
}
.urls-box image:last-child {
	margin-right: 48rpx !important;
}

.experience-list-box {
	padding: 0 48rpx;
	.p24 {
		padding: 24rpx 0 0 0;
		border-top: 1px solid #f2f2f2;
		margin-top: 32rpx;
	}
	.title {
		margin-bottom: 0 !important;
	}
	.item {
		padding-top: 32rpx;
		image {
			width: 228rpx;
			height: 152rpx;
		}
		.name {
			text-align: justify;
			margin-bottom: 16rpx;
		}
		.time {
			color: rgba(143, 143, 154, 0.6);
		}
	}
	.describe {
		margin-top: 18rpx;
		text-align: justify;
		color: rgba(37, 39, 72, 0.7);
	}
}
.recommend-list {
	padding: 32rpx 0 !important;
	border-bottom: 0 !important;
	.title {
		padding: 0 48rpx;
	}
}
.bottom-box {
	background: white;
	position: fixed;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	width: 100%;
	image {
		width: 40rpx;
		height: 40rpx;
	}
	.btn {
		color: white;
		padding: 0 108rpx;
		line-height: 92rpx;
		background-image: linear-gradient(270deg, #7f4aff 0%, #ab7bff 100%);
		border-radius: 16rpx;
		margin: 12rpx 48rpx 12rpx 24rpx;
	}
}
.popup {
	background-color: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	width: 750rpx;
	.top {
		padding: 48rpx;
		.info {
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 32rpx;
			.title {
				margin-bottom: 10rpx;
			}
			.img-url {
				width: 104rpx;
				height: 104rpx;
				border-radius: 16rpx;
				margin-right: 16rpx;
			}
			.close {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.types {
			.title {
				padding: 34rpx 0;
			}
			.active {
				background-image: linear-gradient(270deg, #7f4aff 0%, #a06aff 100%);
				color: white;
			}
			.default {
				background-color: #f7f7f7;
				border-radius: 8rpx;
				padding: 16rpx 24rpx;
				margin-right: 24rpx;
			}
		}
	}
	.bottom {
		border-top: 1px solid #f2f2f2;
		padding: 0 48rpx constant(safe-area-inset-bottom) 48rpx;
		padding: 0 48rpx env(safe-area-inset-bottom) 48rpx;

		.btn {
			width: 316rpx;
			line-height: 92rpx;
			background-image: linear-gradient(270deg, #7f4aff 0%, #ab7bff 100%);
			border-radius: 16rpx;
			margin: 12rpx 24rpx 12rpx 0;
			color: #ffffff;
		}
	}
}
.price {
	color: #ff6f03;
}

.no_data{
	.return_btn{
		margin: 0 auto;
		width: 350rpx;
		line-height: 92rpx;
		color: #fff;
		background-image: -webkit-linear-gradient(right, #7f4aff 0%, #9254ff 100%);
		background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
		border-radius: 16rpx;
	}
}
</style>
